<template>
	<view class="p-20">
		<view class="my-card mb-20" v-for="(item, index) in record" :key="index">
			<view class="info flex flex-wrap" style="white-space: nowrap">
				<view class="item flex mb-20" style="width: 50%">
					<view class="label">姓名：</view>
					<view class="value">{{ item.name }}</view>
				</view>
				<view class="item flex mb-20" style="width: 50%">
					<view class="label">手机号：</view>
					<view class="value">{{ item.phone }}</view>
				</view>
				<view class="item flex mb-20" style="width: 50%">
					<view class="label">工作类型：</view>
					<view class="value">{{ typeMap[item.type] }}</view>
				</view>
				<view class="item flex mb-20" style="width: 50%">
					<view class="label">申请时间：</view>
					<view class="value">
						<u-text :lines="1" :text="item.create_date"></u-text>
					</view>
				</view>
				<view class="item flex mb-20" style="width: 50%">
					<view class="label">审核状态：</view>
					<view class="value">{{ stateMap[item.state] }}</view>
				</view>
				<view v-if="item.state == 'reject'" class="item flex mb-20" style="width: 50%">
					<view class="label">驳回理由：</view>
					<view class="value" style="white-space: pre-wrap">{{ item.reject_reason }}</view>
				</view>
			</view>
			<view class="actions flex justify-end">
				<u-button
					v-if="item.state == 'approve'"
					type="error"
					size="small"
					shape="circle"
					@tap="handleCancelApply(item.id)"
				>
					取消申请
				</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onShow } from "@dcloudio/uni-app";
	import { useUserStore } from "@/store/user.js";
	import { ref } from "vue";

	const userStore = useUserStore();

	const record = ref([]);

	const typeMap = {
		parttime: "兼职",
		fulltime: "全职",
	};

	const stateMap = {
		approve: "审核中",
		pass: "通过",
		reject: "驳回",
		cancel: "取消",
	};

	function handleCancelApply(id) {
		uni.showModal({
			title: "提示",
			content: "是否继续取消申请",
			success: async (res) => {
				if (res.confirm) {
					await userStore.fetchCancelApplyRider({ id });
					record.value = await userStore.fetchApplyRiderRecord();
				}
			},
		});
	}

	onShow(async () => {
		record.value = await userStore.fetchApplyRiderRecord();
		console.log(record.value);
	});
</script>

<style lang="scss" scoped></style>
